<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>幸运大转盘</title>
	<link rel="stylesheet" href="/w/css/mui.min.css">
    <link rel="stylesheet" href="/w/css/weui.css" />
    <link rel="stylesheet" href="/w/css/weuix.css" />
	<link rel="stylesheet" href="/w/css/mui.loading.css" />
	<link rel="stylesheet" href="./danmu/assets/css/style.css" />
    <link rel="stylesheet" href="css/kinerLottery.css?v.1.1.7">

    <!-- <script src="/w/js/zeptonew.min.js"></script> -->
	<script type="text/javascript" src="/w/js/zepto.min.js"></script>
    <script src="/w/js/zepto.weui.js"></script>
    <script src="/w/js/mui.min.js"></script>
    <script src="js/kinerLottery.js?v1.3"></script>
    <script src="/w/js/wx.js"></script>
    <script src="/w/js/vue.min.js"></script>
    <script src="/w/js/vue-lazyload.js"></script>
	<script src="/w/js/mui.loading.js"></script>

    <style>
        body,html {
            position: relative;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            touch-action: none;
            overflow: hidden !important;
            background: rgb(218, 41, 62);
        }
        
        .container::-webkit-scrollbar {
            display: none
        }
        
        .container.page-bg {
            background-color: rgb(218, 41, 62);
            display: none;
        }
        
        .kuan {
            background-image: url(images/bg.png?v1.1.1);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: auto;
            width: 100%;
            margin: 0 auto;
        }
        
        .rotate-con-wai {
            background: url(images/box.png?v1.1.1) no-repeat 0 0;
            background-size: 100% 100%;
            width: 100%;
			visibility: hidden;
            position: absolute;
            margin: 0 auto;
            top: -0.6rem;
            left: 0;
            right: 0;
            z-index: 0;
        }
        
        .backicon {
            position: absolute;
            left: 2px;
            top: 2px;
			z-index: 999;
        }
        
        .backicon a {
            color: white;
            font-size: 36px;
        }
        
        .synice {
            color: rgb(246, 232, 39);
            font-size: 0.9rem;
            font-weight: bold;
            padding: 5px;
            display: block;
            width: 70%;
            margin: 5px auto;
        }
        
        .weui-flex.bot {
            padding-top: 35px;
            padding-bottom: 15px;
        }
        
        .weui-flex .weui-flex__item {
            text-align: center;
        }
        
        [v-cloak] {
            display: none;
        }
        
        .bg-orange {
            width: 60%;
            background: rgb(253, 237, 143);
            color: red;
            font-size: 15px;
        }
		.popuAlert{
			
		}
		.popuAlert .weui-flex__item{
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.popuAlert .weui-flex__item .popuWord{
			color:black;
		}
		.btnKnow{
			background: rgb(232, 178, 130);
			color:rgb(95, 123, 177);
			font-size: 16px;
			font-weight: bold;
		}
		.leftIcon{
			width:7em;
		}
		.rightIcon{
			width:7em;
		}
		.loading2{
			background-color: rgba(243, 85, 67, 1);
		}
		.mui-popover-arrow:after {
			position: absolute;
			top: -9px;
			left: 9px;
			width: 15px;
			height: 15px;
			content: ' ';
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			border-radius: 3px;
			background: #fff;
			border-top: 1px solid #999999;
			z-index: 0;
			border-left: 1px solid #999999;
		}
		
		.mui-popover-arrow {
			display: none;
		}
		.popover-main {
			position: relative;
		}
		.mui-backdrop {
		    background-color: rgba(0,0,0,.7);
		}
		.popover-main .popover-word{
			position: absolute;
			top: 14%;
			color: #fff;
			padding: 0 30px 0 20px;
			font-size: 13px;
		}
		.resultpopover-main {
			position: relative;
		}
		.resultpopover-main .resultpopover-word{
			position: absolute;
			top: 55%;
			transform: translateY(-50%);
			color: #fff;
			padding: 0 30px 0 30px;
			font-size: 13px;
			z-index: 999999;
			left: 0;
			right: 0;
			margin: 0 auto;
			text-align: center;
		}
		.resultpopover-main .resultpopover-bot{
			position: absolute;
			bottom: 15%;
			color: #fff;
			width: 100%;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
		}
		.resultpopicon{
			width:25%;
		}
    </style>
    
</head>

<body ontouchstart>
	<!-- 弹幕 -->
	<div class="container" style="position: absolute;width: 100%;height: 5rem;z-index:99" id="danmu">
	    <div class="offset-sm-1 col-sm-10 mt-3" style="height:100%;">
	        <div class="video-container" style="height: 100%;">
	            <div class="barrage-container"></div>
	        </div>
	    </div>
	</div>
	
    <div class="container page-bg" id="container">
		<!-- <div class="loading2 hide" data-text="页面正在加载..." id="loadtext"></div> -->
        <div class="backicon">
            <img src="./images/logo.png?v1.1.1" id="doback" style="position: absolute;top: 9px;width: 150px;left: 12px;">
        </div>
		
        <!--活动规则-->
        <div class="kuan">
            <div class="maintitle" style="position: relative;top:3rem">
                <img src="./images/title.png?v1.1.1" style="width:75%;top:3rem;margin:0 auto;left:0;right:0;">
                <img src="./images/rule.png?v1.1.1" style="position: absolute;right: 0;top: 3rem;width: 20%;" id="proRule">
            </div>

            <div id="box" class="box">
                <div class="outer KinerLottery KinerLotteryContent"><img src="./images/Turntable.png?v1.1.2" /></div>
                <!-- 大专盘分为三种状态：活动未开始（no-start）、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态，js会根据这3个class进行匹配状态 -->
                <div class="inner KinerLotteryBtn start"></div>
                <br><br><br><br><br><br>
                <br><br><br>
                <div class="space"></div>
                <div class="rotate-con-wai" id="wa1i">
                    <img src="./images/box.png?v1.1.1" style="visibility: hidden;width:100%;" />
                </div>
            </div>

            <div style="clear: both;"></div>

            <div style="position: relative;z-index: 1;height: 6rem;margin-top: -4.1rem;left:0;right: 0;">
               <!-- <img src="./images/man.png?v1.1.1" style="position: absolute;width: 23%;">
                <img src="./images/gold.png?v1.1.1" style="position: absolute;width: 32%;left: 13%;bottom: -7%;"> -->
            </div>

            <div class="maintitle" style="position: relative;left: 0;right: 0;" id="maintitle" v-cloak>
                <!-- <span style="color:rgb(255,255,255);font-size: 0.8rem;">每次消耗<span style="color: #F9DF54;font-size: 16px;">&nbsp;&nbsp;{{model.needBeen}}&nbsp;&nbsp;</span>纳思豆</span> -->
                <span class="synice" v-if="model.beginTime!=''">开始时间：{{model.beginTime}}</span>
            </div>
			
			<div class="weui-flex bot" id="bot">
			    <div class="weui-flex__item" @click="doPlay(5)">
			        <!-- <a href="javascript:;" class="weui-btn bg-orange" id="chou5"><i ></i>抽5次</a> -->
					<img src="./images/content.png?v1.1.1" class="leftIcon"/>
			    </div>
			    <div class="weui-flex__item" @click="doPlay(10)">
					<img src="./images/prize.png?v1.1.1" class="rightIcon"/>
			        <!-- <a href="javascript:;" class="weui-btn bg-orange" id="chou10"><i ></i>抽10次</a> -->
			    </div>
			</div>
			<br>
			<br>
        </div>
    </div>
	
	<!--弹出层窗口-->
	<div id="div" style="margin-top:35%; transform: translateY(-50%);"></div>
	<div id="popover" class="mui-popover"
		style="height: 284px;display: none;width: 80%;left: 0;right: 0;background: none;">
		<div class="popover-main">
			<img src="./images/popuicon.png?v1.1.1" style="border-radius: 10px;width:100%;" onclick="javascript:mui('#popover').popover('hide');"/>
			<div class="popover-word" id="popover-word">
				
			</div>
		</div>
	</div>
	
	<div id="resultpopover" class="mui-popover"
		style="height: auto;display: none;width: 85%;left: 0;right: 0;background: none;margin-top:40%;transform: translateY(-50%);">
		<div class="resultpopover-main">
			<img src="./images/resulticon.png?v1.1.1" style="border-radius: 10px;width:100%;" onclick="javascript:mui('#resultpopover').popover('hide');"/>
			<div class="resultpopover-word" id="resultpopover-word">
			</div>
			<div class="resultpopover-bot" id="resultpopover-bot">
			</div>
		</div>
		<br>
		<div class="botbtn" id="lq" style="text-align: center;">
			<img src="./images/resultbtn.png?v1.1.1" style="border-radius: 10px;width:100px;"/>
		</div>
	</div>

    <!--工具类-->
    <script src="/w/js/util.js?v1.1.3" type="text/javascript"></script>
	<!-- 引入弹幕JS -->
	<script src="./danmu/js/barrage.js"></script>
    <script>
        var authKey = null;
        $(function() {
           authKey = getUrlParam("authKey");
            //authKey = 'E32946D4EC5B7070BAAE982B62FF162F'
            initData()
        });
        var KinerLottery = new KinerLottery({
            rotateNum: 8, //转盘转动圈数
            body: "#box", //大转盘整体的选择符或zepto对象
            direction: 0, //0为顺时针转动,1为逆时针转动
            doing: true,
            disabledHandler: function(key) {
                switch (key) {
                    case "noStart":
                        alert("活动尚未开始");
                        break;
                    case "completed":
                        alert("活动已结束");
                        break;
                }
            }, //禁止抽奖时回调
            clickCallback: function(e) {
                //console.log(e)
                let that = this
				that.turnModel = 'single'
                if (vue1.model.left > 0) {
					
					if(!that.click){
						that.click = true
						postAjax2({id: 2,method: "rotarytable_WinningInformation",params: {"authKey": authKey,"activityId": 46}
						//postAjax2({id: 2,method: "signuser_getOnePrizeV2",params: {"authKey": authKey,"activityId": 30}
						}, function(datas) {
							console.log(JSON.stringify(datas));
						    if (datas.condition == 1 || datas.condition == 2) {
						       if(datas.message != ''){
								   $.alert(datas.message, "提示", function() {
								   	KinerLottery.doing = false
								       return;
								   })
							   }
						    } else if (datas.condition == 0) {
								datainfo = datas;
								that.goKinerLottery(360 - datas.angle)
								// datas.forEach(function(item, index) {
								// 	if(index == 0 ){
								// 		//console.log(index + "-"+ item.location)
								// 		that.goKinerLottery(360 - item.location)
								// 	}
								// })
								
						    }
						});
					}
					
					setTimeout(function() {
						mui.hideLoading();
					    //$.hideLoading();
					}, 2000)
                } else {
                    mui.alert("今天的抽奖次数用尽，请明天在来。", "提示", function() {
                    })
                    return;
                }
            },
            //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面
            KinerLotteryHandler: function(deg) {
				//console.log(KinerLottery.turnModel)
				if(KinerLottery.turnModel == 'single'){
					var str = "<img src='" + datainfo.award.thumbImg + "' style='width:65px;height:65px;'><br>获得："
					// $.alert(str + datainfo.award.prizeName, "恭喜您获得：", function() {
					// 	initData()
					// 	KinerLottery.doing = false
					// 	return;
					// })
					if(datainfo!=null){
						let valueStr="<img src='"+datainfo.award.thumbImg+"' class='resultpopicon'/>"
						document.getElementById("resultpopover-word").innerHTML = valueStr
						document.getElementById("resultpopover-bot").innerHTML = datainfo.award.prizeName
						
						mui("#resultpopover").popover('toggle', document.getElementById('div'));
					}
				}
			}
        });
    </script>
    <!--滚动 start-->
    <script type="text/javascript">
        var vue1 = null,vuebtn = null,datainfo = null;

        document.onreadystatechange = function() {
            if (document.readyState == "complete") {
                vuebtn = new Vue({
                    el: "#bot",
                    data: {
                        model: null,
						value: null
                    },
                    methods: {
                        doPlay(value) {
							if(value == 5){
								console.log("联系我们")
								location.href = "tel:" + vue1.model.customer;
							}else if(value == 10){
								location.href = "https://www.dalinicegroup.com/w/usercenter/user/myprizeapp.html?authKey="+authKey
							}
                        }
                    }
				})
			}
		}
        function initData() {
			mui.showLoading("活动正在加载....", "div");
            postAjax({id: 2,method: "rotarytable_ActivityInformation",params: {"authKey": authKey,"activityId": 46}
            }, function(datas) {
                //console.log(JSON.stringify(datas));
                if (datas != '') {
                    if (vue1 == null) {
                        vue1 = new Vue({el: "#maintitle",data: {model: datas}})
                    } else {
                        vue1.model = datas;
                    }
                    setTimeout(() => {
						danmu(vue1.model.winningList)
						mui.hideLoading()
                        $("#container").show()
                    }, 500)
                }
            });
        }
        //规则
        document.getElementById("proRule").addEventListener("tap", function() {
			if(vue1!=null){
				document.getElementById("popover-word").innerHTML = utilsClass.replaceAll(vue1.model.activeContent)
				mui("#popover").popover('toggle', document.getElementById('div'));
			}
           
        })
		//领取
		document.getElementById("lq").addEventListener("tap", function() {
			if(authKey!=null){
				location.href = "https://www.dalinicegroup.com/w/usercenter/user/myprizeapp.html?authKey="+authKey
			}
		})
    </script>
    <!--滚动 end-->
    <script>
        var overscroll = function(el) {
            el.addEventListener('touchstart', function() {
                var top = el.scrollTop,
                    totalScroll = el.scrollHeight,
                    currentScroll = top + el.offsetHeight;
                if (top === 0) {
                    el.scrollTop = 1;
                } else if (currentScroll === totalScroll) {
                    el.scrollTop = top - 1;
                }
            });
            el.addEventListener('touchmove', function(evt) {
                if (el.offsetHeight < el.scrollHeight)
                    evt._isScroller = true;
            });
        }
        overscroll(document.querySelector('.container'));
        document.body.addEventListener('touchmove', function(evt) {
            if (!evt._isScroller) {
                evt.preventDefault();
            }
        });
		
		
		// 弹幕JS
		function danmu(obj) {
		    let initialComments = []; //定义一个数组，用于储存弹幕
		    let vue_danmu = new Vue({
		        el: '#danmu',
		        data: {
		            items: obj
		        },
		    })
		
		    // 遍历弹幕，并储存进数组中
		    obj.forEach(function (item, index) {
		        let param = {
		            "id": index,
		            "text": item.prizeName,
		            "img": item.thumbImg,
		            "name": item.userName,
		            "time": item.minuteStr,
		            "imgtx": item.gravatar,
		            //  "color": "red"//可设置弹幕颜色
		        }
		        initialComments.push(param);
		    });
		
		
		    window.toggleBarrage = () => {
		        barrage.toggleBarrage();
		    }
		
		    window.addComment = () => {
		        barrage.addComment({
		            text: document.forms[0].comment.value,
		            color: document.forms[0].fontColor.value
		        });
		        document.forms[0].comment.value = '';
		        document.forms[0].comment.focus();
		    }
		
		    var barrage = new Barrage('.barrage-container', {
		        rows: 3,
		        initialComments: initialComments,
		        opacity: 0.8,
		        // autoStart: false
		    });
		}
    </script>
</body>

</html>